Ajax

头像
navk
    阅读 3 分钟
    1

    原理

    客户端通过xmlHttpRequest对象向服务器发送异步请求,从服务器获取数据,通过操作javascript的DOM对象来更新页面。

    实现

    原生实现

    function createXmlHttpRequest(){
        var xhr;
        if(window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
            xhr = new window.XMLHttpRequest();
        }else if(window.ActiveXObject){
           // code for IE6, IE5
            try{
                xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
             }catch(ex){
                 xhr = new window.ActiveXObject("msxm12.XMLHTTP");
             }
        }
        return xhr;
    }
    
    function doGet(url, successcallback, errorcallback){
        var xhr = createXmlHttpRequest();
        xhr. open("GET", URL, true);
        xhr.onreadystatechange = function (){
            if(xhr.readystate==4){
                if(xhr.status==200){
                    successcallback();
                }else{
                    errorcallback();
                }
            }
        }
        xhr.send();
    }
    function doPost(url, successcallback, errorcallback){
        var xhr = createXmlHttpRequest();
        xhr. open("GET", URL, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function (){
            if(xhr.readystate==4){
                if(xhr.status==200){
                    successcallback();
                }else{
                    errorcallback();
                }
            }
        }
        xhr.send();
    }
    

    Jquery封装实现

    var ajaxa = function(){
        //默认参数
        var _options = {
            type: 'GET',
            url: null,
            data: null,
            dataType: 'jsopn',
            success: null,
            fail: null,
            async: true,
            contentType: 'application/x-www-form-urlencoded'
        };
        
        return function(options){
            if(!options || !options.url){
                throw('参数异常');
            }
            
            var xhr = new (window.XMLHttpRequest||window.ActionXObject)('Mircosoft.xml);
            
            xhr.open(options.type, options.url, options.async);
            
            xhr.onreadystate.change = function(){
                if(xhr.raadySate = 4){
                    if(xhr.status == 200 && xhr.status < 300 || xhr.status == 304){
                        var text = xhr.responseText;
                        if(options.dataType == 'json'){
                            text = JSON.parse(text);
                        }
                        if(typeof options.success === 'function'){
                            options.success(text, xhr.status);
                        }
                    }else{
                        if(typeof options.fail === 'function'){
                            options.fail('failed', 500);
                        }    
                    }
                }
            }
            xhr.setRequestHeader('content-type',options.contentType);
            xhr.send(options.data);
        }
    }

    readystate五种状态

    0 - (未初始化)还没有调用send()方法
    1 - (载入)已调用send()方法,正在发送请求
    2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
    3 - (交互)正在解析响应内容
    4 - (完成)响应内容解析完成,可以在客户端调用了

    常见的MIME类型

    MIME是描述消息内容类型的因特网标准,能包含文本、图像、音频、视频以及其他应用程序专用的数据。主要有五种,text、application、images、audio、video

    响应状态码304原理

    客户端发送条件验证请求,服务器端读取If-Modified-SinceIf-None-Match请求头信息,来判断客户端缓存的资源是否是最新的。是,则返回304状态码,客户端从缓存中读取数据。


    navk
    129 声望7 粉丝